import Map from 'ol/Map'
import View from 'ol/View'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import { Style, Fill, Stroke, Circle, Text } from 'ol/style'
import { fromLonLat } from 'ol/proj'
import Cluster from 'ol/source/Cluster'
import { click } from 'ol/events/condition'
import Select from 'ol/interaction/Select'

interface ClusterMapOptions {
  map: Map
  features?: Feature[]
  clusterDistance?: number
  enableZoom?: boolean
  singlePointStyle?: Style
  clusterStyle?: Style
}

export class ClusterMapLayer {
  private map: Map
  private vectorSource: VectorSource
  private clusterSource: Cluster
  private vectorLayer: VectorLayer
  private select: Select
  private enableZoom: boolean

  constructor(options: ClusterMapOptions) {
    this.map = options.map
    this.enableZoom = options.enableZoom ?? true

    // 创建矢量数据源
    this.vectorSource = new VectorSource()

    // 创建聚类数据源
    this.clusterSource = new Cluster({
      distance: options.clusterDistance ?? 40,
      source: this.vectorSource
    })

    // 创建矢量图层
    this.vectorLayer = new VectorLayer({
      source: this.clusterSource,
      style: (feature) => {
        const size = feature.get('features').length

        if (size === 1) {
          return options.singlePointStyle ?? new Style({
            image: new Circle({
              radius: 8,
              fill: new Fill({
                color: '#00eaff'
              }),
              stroke: new Stroke({
                color: '#fff',
                width: 2
              })
            })
          })
        }

        return options.clusterStyle ?? new Style({
          image: new Circle({
            radius: 15,
            fill: new Fill({
              color: 'rgba(0, 234, 255, 0.5)'
            }),
            stroke: new Stroke({
              color: '#fff',
              width: 2
            })
          }),
          text: new Text({
            text: size.toString(),
            fill: new Fill({
              color: '#fff'
            }),
            font: 'bold 14px Arial'
          })
        })
      }
    })

    // 创建点击交互
    this.select = new Select({
      condition: click,
      style: null
    })

    // 添加图层到地图
    this.map.addLayer(this.vectorLayer)
    this.map.addInteraction(this.select)

    // 如果有初始数据，添加到图层
    if (options.features) {
      this.addFeatures(options.features)
    }

    // 设置点击事件
    this.setupClickHandler()
  }

  private setupClickHandler() {
    this.select.on('select', (event) => {
      const selected = event.selected[0]
      if (selected && this.enableZoom) {
        const features = selected.get('features')
        if (features.length > 1) {
          const view = this.map.getView()
          const currentZoom = view.getZoom()
          const center = (selected.getGeometry() as Point).getCoordinates()

          if (currentZoom !== undefined && center) {
            view.animate({
              zoom: currentZoom + 1,
              center: center,
              duration: 500
            })
          }
        }
      }
    })
  }

  public addFeatures(features: Feature[]) {
    this.vectorSource.addFeatures(features)
  }

  public clearFeatures() {
    this.vectorSource.clear()
  }

  public getLayer(): VectorLayer {
    return this.vectorLayer
  }

  public destroy() {
    this.map.removeLayer(this.vectorLayer)
    this.map.removeInteraction(this.select)
  }
} 